<style media="screen">
    .head-container{
      position: relative;
      padding: 10px 0 14px;
      border-bottom: 1px solid #E3E3E5;
    }
    .head-container .mes{
      overflow: hidden;
      margin-right: 10px;
      float: left;
    }
    .head-container .mes p{
      font-size: 12px;
      color:#CFCFCF;
      margin-bottom: 6px;
    }
    .head-container .mes input{
      width: 235px;
      height: 34px;
    }
    .head-container .flow{
      float: left;
      margin-right: 10px;
    }
    .head-container .flow p{
      font-size: 12px;
      color:#CFCFCF;
      margin-bottom: 6px;
    }
    .head-container .flow .flow-select{
      width: 140px;
      height: 34px;
    }
    .head-container .button-group{
      padding-top: 23px;
    }
		.config-table-wrap:hover {
			overflow-x: scroll;
		}
</style>

<section class="pl-24 pr-24" class="projectGl" id="projectGl">
  <hl-page-header title="我的项目">
    <hl-button type="outline" @on-click="add" v-if="power.indexOf('c284') > -1">新建项目</hl-button>
  </hl-page-header>

  <div class="head-container clearfix">
    <div class="clearfix">
      <div class="mes">
        <p>信息搜索</p>
        <div class="global_search">
          <span class="icon-Gm-search"></span>
          <input
            autocomplete="off"
            type="text"
            class="global_ipt_text"
            placeholder="项目名称/联系人/联系电话/创建人"
						v-model="keyword"
           />
        </div>
      </div>

      <div class="flow" v-if="isExtenseFlag">
        <p>渠道分类</p>
      	<hl-select :data="channelCateArr" v-model="channelCategoryCode" width="120" @on-change="selectedCC"></hl-select>
      </div>
      <div class="flow" v-if="isExtenseFlag">
        <p>渠道名称</p>
      	<hl-select :data="channelNameArr" v-model="channelNameCode" width="120" @on-change="selectedCN"></hl-select>
      </div>
      <div class="button-group" v-show="!isExtenseFlag">
        <hl-button @on-click="listDt" size="mini">查询</hl-button>
        <hl-button @on-click="reset" size="mini">重置</hl-button>
      </div>
    </div>

    <div class="mt-10" v-if="isExtenseFlag">
      <div class="flow">
        <p>项目所在地</p>
        <div class="dy-flex">
           <div class="mr-10">
           	<hl-select :data="provinceList" v-model="provinceId" width="120" @on-change="setProvince"></hl-select>
           </div>
           <div class="mr-10">
           	<hl-select :data="cityList" v-model="cityId" width="120" @on-change="setCity"></hl-select>
           </div>
           <hl-select :data="areaList" v-model="areaId" width="120" @on-change="setArea"></hl-select>
        </div>
      </div>
      <div class="button-group">
        <hl-button @on-click="listDt" size="mini">查询</hl-button>
        <hl-button @on-click="reset" size="mini">重置</hl-button>
      </div>
    </div>

    <div class="global_open_sign" @click="openOffOn">
      <span v-if="!isExtenseFlag">更多筛选项</span>
      <span v-if="isExtenseFlag">收起筛选项</span>
    </div>
  </div>

  <div class="global_screening_container">
    <ul class="global_screening_list">
      <li
      v-for="item in listMenu"
      @click="selectStatus(item)"
      :class="{active: listMenuArrActive.indexOf(item.code) > -1 }">
        {{item.name}}({{item.num}})
      </li>
    </ul>
    <span class="global_refresh_icon icon-uniE94B"  @click="resetTab"></span>
  </div>

	<hl-list
		:menu-data="headArr"
		:data="listObj.expansionProjList"
		:config-type="configType"
		@on-click-sort="sortBySTTime"
		@on-click-type="selectTableType"
		@on-click-custom="confirmSubmitTable"
		v-slot:default="{opData, opIndex}"
	>
			<a @click="goTodetail(opData.id)">详情</a>
	</hl-list>


 <!-- 自定义列表项弹出层 -->
<div class="pop box-o-shadow config-table-layer" v-show="isShowTableLayer">
  <div class="head-pop font-16"><span>自定义列</span>
    <button class="fw-close absolute close" type="button" @click="closeTableLayer">×</button>
  </div>
  <div class="content-pop">
    <div class="content text-center">
      <ul class="title-wrap">
        <li class="dy-fx-1 text-left">名称</li>
        <li class="dy-fx-2">自定义名称</li>
        <li class="dy-fx-1">状态</li>
      </ul>
      <div class="ctx-wrap" id="sortableTable">
        <ul  :class="{ 'active': item.isActive == 'Y' }"  v-for="(item,index) in sortTableTitle" @mouseenter="showhighLightTitleItem(item,index)" @mouseleave="removehighLightTitleItem(item,index)">
          <li class="sort-sign" :class="{ 'active':item.isActive == 'Y' }">排序</li>
          <li class="dy-fx-1 name">{{item.name}}</li>
          <li class="dy-fx-2">
            <input type="text" class="form-control" v-model="item.customDisplayName">
          </li>
          <li class="dy-fx-1 ">
            <span class="show-icon " :class="{'icon-Nav-contract-choice':item.customShowFlag == 'Y' , 'icon-uncheck':item.customShowFlag == 'N' }" @click="selectedTitleItem(index)">显示</span>
            <span class="hide-icon " :class="{'icon-Nav-contract-choice':item.customShowFlag == 'N' , 'icon-uncheck':item.customShowFlag == 'Y' }" @click="cancelSelectedTitleItem(index)">隐藏</span>
          </li>
        </ul>

      </div>
    </div>
  </div>
  <div class="fw-button">
    <button type="button" class="fw-submit yes" @click="confirmSubmitTable">确定</button>
    <button type="button" class="fw-submit no" @click="closeTableLayer">取消</button>
  </div>
</div>

<!--遮罩-->
<div class="backdrop" v-if="isShowTableLayer"></div>
<!-- end -->




  <div class="user-page ptb-10 clearfix">
    <div class="pull-left user-page-num">
      <span class="font-14">共<i>{{ listObj.totalCount }}</i>条记录</span>
      <span>
				每页
        <hl-select :data="pageNums" v-model="limit" width="80" @on-change="turnPage"></hl-select>
				条
			</span>
    </div>
    <div class="pull-right">
      <ul class="page" id="page"></ul>
    </div>
  </div>

</section>

<script src="modules/market/scripts/myProject.js" charset="utf-8"></script>
